<template>
  <div class="table-page lf flex-col">
    <a-card :bordered="false">
      <div class="flex flex-a-c mb-14">
        <span class="text-size-18 text000"> {{ userInfoData.name }} </span>
      </div>
      <a-descriptions :column="2">
        <a-descriptions-item label="渠道方邀请码">
          {{ userInfoData.inviteCode || '--' }}
        </a-descriptions-item>
        <a-descriptions-item label="状态">
          <span class="mr-20">{{ userInfoData.status == 0 ? '正常' : '停用' }}</span>
        </a-descriptions-item>
        <a-descriptions-item label="公司名称">
          {{ userInfoData.companyName || '--' }}
        </a-descriptions-item>
        <a-descriptions-item label="联系人">
          {{ userInfoData.contactName || '--' }}
        </a-descriptions-item>
        <a-descriptions-item label="手机号">
          {{ userInfoData.contactPhone || '--' }}
        </a-descriptions-item>
        <a-descriptions-item label="注册时间">
          {{ userInfoData.occupancyTime || '--' }}
        </a-descriptions-item>
      </a-descriptions>
    </a-card>
    <div class="mt-20 flex-1 flex-col h-full overflow-hidden">
      <div class="pb-14">
        <MsSectioner ref="MsSectionerRef" :values="menuList" :height="30" @click="tabChange" />
      </div>
      <div class="flex-1 w-full color-bg-1">
        <section class="box-full overflow-hidden box-border">
          <transition name="fade-slide" mode="out-in" appear>
            <keep-alive>
              <component
                :is="menuList[selectedKey].value"
                :userInfoData="userInfoData"
                @changeTab="changeTab"
              ></component>
            </keep-alive>
          </transition>
        </section>
      </div>
    </div>
  </div>
</template>
<script setup>
import { channelIncomeDetail } from '@/apis'
import Commission from './Commission.vue'
import BaseInfo from './BaseInfo.vue'
import BillLog from './BillLog.vue'

import $bus from '@/utils/bus'

defineOptions({ name: 'channelSetting' })

const route = useRoute()
const selectedKey = ref(0)
const MsSectionerRef = ref()
const menuList = ref([
  { name: '基础信息', value: markRaw(BaseInfo) },
  { name: '账单明细', value: markRaw(BillLog) }
])
const userInfoData = ref({
  baseRate: undefined,
  commissionRate: undefined,
  companyName: undefined,
  contactName: undefined,
  contactPhone: undefined,
  inviteCode: undefined,
  isAllow: undefined,
  isEnable: undefined,
  isRateUpdate: undefined,
  isShow: undefined,
  name: undefined,
  nickname: undefined,
  occupancyTime: undefined,
  password: undefined,
  rateUpdatedAt: undefined,
  status: undefined,
  userCount: undefined,
  username: undefined
})

const tabChange = (val) => {
  selectedKey.value = val.index
}

const changeTab = (val) => {
  MsSectionerRef.value?.handleClick(val.tab)
}

const getChannelIncomeDetail = async () => {
  const res = await channelIncomeDetail()
  userInfoData.value = res.data
  if (userInfoData.value?.isShow == 1) {
    menuList.value.push({ name: '分佣管理', value: markRaw(Commission) })
  }
}

watch(
  () => menuList.value,
  (e) => {
    if (!e) return
    if (route.query.tab) {
      if ((route.query.tab = 'BillLog')) {
        const index = e.findIndex((item) => item.name == '账单明细')
        changeTab({ tab: index })
      }
    }
  },
  { deep: true, immediate: true }
)

onActivated(() => {
  if (route.query.tab) {
    if ((route.query.tab = 'BillLog')) {
      const index = menuList.value.findIndex((item) => item.name == '账单明细')
      changeTab({ tab: index })
    }
  }
})

onMounted(() => {
  getChannelIncomeDetail()
  $bus.on('getChannelIncomeDetail', () => {
    getChannelIncomeDetail()
  })
})

onUnmounted(() => {
  $bus.off('getChannelIncomeDetail')
})
</script>
<style scoped lang="scss">
.table-page {
  background: transparent;
  margin: 0;
}
.arco-alert {
  padding: 2px 6px 0;
}
</style>
